<template>
  <div class="tables">
    <div class="header">
      <slot name="header"> </slot>
    </div>
    <el-table :data="userList" style="width: 100%" align="center" v-bind="childrenProps" >
      <!-- 开启选择器 -->
      <el-table-column
        v-if="selectShow"
        type="selection"
        width="60"
        align="center"
      ></el-table-column>
      <!-- //开启序号 -->
      <el-table-column
        v-if="indexShow"
        type="index"
        label="序号"
        width="80"
        align="center"
      ></el-table-column>

      <template v-for="tableItem in tablesList" :key="tableItem.label">
        <el-table-column
          :prop="tableItem.prop"
          :label="tableItem.label"
          :width="tableItem.width"
          align="center"
          show-overflow-tooltip
        >
          <template #default="scope">
            <slot :name="tableItem.slotName" :row="scope.row">
              <!-- <el-button type="primary" >{{scope.row[tableItem.prop]}}</el-button> -->
              {{ scope.row[tableItem.prop] }}
            </slot>
          </template>
        </el-table-column>
        
      </template>

      <!-- <el-table-column prop="name" label="name" width="180" />
      <el-table-column prop="realname" label="真实姓名" width="180" />
      <el-table-column prop="updateAt" label="更新时间" /> -->
    </el-table>
    <div class="footer" v-if="isPagination">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
import { defineComponent } from "@vue/runtime-core";

export default defineComponent({
  name: "BBTable",
  props: {
    userList: {
      type: Object,
      required: true,
    },
    tablesList: {
      type: Array,
      required: true,
    },
    indexShow: {
      type: Boolean,
      default: true,
    },
    selectShow: {
      type: Boolean,
      default: true,
    },
    //控制是否子选项需要展开(可选项)
    childrenProps:{
      type:Object,
      default:()=>({})
    },
    // 是否需要分页
    isPagination:{
      type:Boolean,
      default:true
    }
  },
});
</script>

<style lang='less' scoped>
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.footer {
  display: flex;
  justify-content: center;
  padding-top: 15px;
}
</style>